<template>
  <div class="content-wrapper background_box">
    <headback :title="t('adminer')"></headback>
    <div class="content-wrap nearbyShop topHead">
      <van-tabs v-model:active="active" title-inactive-color="#e4e4e4" @click-tab="changeTab" title-active-color="#fff">
        <van-tab :title="t('shopAudit')" name='0'>
          <template #title>
            <div>{{ t('shopAudit') }}</div>
            <div class="line_tab"></div>
          </template>
          <div class="tab_warpper">
            <div class="flex flex_center">
              <van-button @click="clickBatch" v-if="store.state.unCheckedShop && store.state.unCheckedShop.length > 0"
                class="batch_button" type="primary">
                {{ t('batchOperate')
                }}</van-button>
              <van-checkbox v-if="store.state.unCheckedShop && store.state.unCheckedShop.length > 0&&isBatch" v-model="allShopChecked" @click="onAll(1)"
                :checked-color="store.state.themeColor">
                <span class="all_title">{{ t('checkAll') }}</span>
              </van-checkbox>
            </div>
            <div class="lineheight"></div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list v-model:loading="loading" :finished="finished" :immediate-check="false"
                :finished-text="t('noMore')" @load="onLoad">
                <van-checkbox-group v-model="checkedShop" style="margin-top: 10px;" direction="horizontal">
                  <div v-for="item in store.state.unCheckedShop" :key="item.account" class="shopItem_class">
                    <van-checkbox v-if="isBatch" :checked-color="store.state.themeColor" icon-size="22px"
                      class="checked_class" :name="item.account"></van-checkbox>
                    <shopItem :shopInfo="item" @refresh="onRefresh"></shopItem>
                  </div>
                </van-checkbox-group>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
        <van-tab :title="t('shopOn')" name='1'>
          <div class="tab_warpper">
            <div class="lineheight"></div>
            <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2">
              <van-list v-model:loading="loading2" :finished="finished2" :immediate-check="false"
                :finished-text="t('noMore')" @load="onLoad2">
                <van-checkbox-group v-model="checkedGoods" @change="goodsCheckChange" style="margin-top: 10px;"
                  direction="horizontal">
                  <div v-for="item in store.state.outShop" :key="item.owner" class="shopItem_class">
                    <van-checkbox v-if="isBatch" :checked-color="store.state.themeColor" icon-size="22px"
                      class="checked_class" :name="item.goodsId"></van-checkbox>
                    <shopItem onServe admin :shopInfo="item" @refresh="onRefresh2">
                    </shopItem>
                  </div>
                </van-checkbox-group>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="fixed_class" v-if="isBatch">
      <van-button @click="batchPass(1)" :loading="btnLoading1" class="fix_button" type="primary"> {{ t('batchPass')
      }}</van-button>
      <van-button @click="batchPass(2)" :loading="btnLoading2" class="fix_button" type="primary"> {{ t('batchNoPass')
      }}</van-button>
      <van-button @click="isBatch = false" class="fix_button" type="primary"> {{ t('cancel') }}</van-button>
    </div>
  </div>
</template>
<script setup>
import userEth from "@/utils/userEth.js"
import { useStore } from "vuex";
import shopItem from "./components/shopItem.vue"
import { ref, onMounted, computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { ethers } from "ethers";
const { locale, t } = useI18n();
const store = useStore();
const allShopChecked = ref(true)
let active = ref('0')
import { showToast } from 'vant';
active.value = localStorage.getItem('adminTab') || '0'
const changeTab = (d) => {
  localStorage.setItem('adminTab', d.name)
  onAll(1)
  onAll(2)
}
const btnLoading1 = ref(false)
const btnLoading2 = ref(false)
const checkedShop = ref([])
const checkedGoods = ref([])
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const loading2 = ref(false);
const finished2 = ref(false);
const refreshing2 = ref(false);
const allGoodsChecked = ref(false)
const pageSize = 10
const onAll = (value) => {
  if (value == 1) {
    if (allShopChecked.value) {
      let arr = []
      store.state.unCheckedShop.forEach(res => {
        arr.push(res.shopId)
      })
      checkedShop.value = arr
    } else {
      checkedShop.value = []
    }
  } else if (value == 2) {
    if (allGoodsChecked.value) {
      let arr = []
      store.state.outShop.forEach(res => {
        arr.push(res.goodsId)
      })
      checkedGoods.value = arr
    } else {
      checkedGoods.value = []
    }
  }
}
const goodsCheckChange = () => {
  allGoodsChecked.value = store.state.outShop.length == checkedGoods.value.length
}
const isBatch = ref(false)

const clickBatch = () => {
  isBatch.value = !isBatch.value
  allGoodsChecked.value = true
  onAll(1)
  onAll(2)
}
const batchPass = async (value) => {
  value == 1 ? btnLoading1.value = true : btnLoading2.value = true
  if (active.value == 0) {
    try {
      let arr = checkedShop.value.filter(res=>res)
      let hex = await userEth.ContractWithSinger.batchAuditTrader(arr, value)
      await hex.wait()
      showToast(t('auditSuccessful'))
      value == 1 ? btnLoading1.value = false : btnLoading2.value = false
      onRefresh()
      // isBatch.value = false
    } catch (err) {
      debugger
      value == 1? btnLoading1.value = false : btnLoading2.value = false
      showToast(t('auditFail'))
    }
  } else {
    try {
      let hex = await ContractWithSinger.batchAuditTrader(checkedGoods.value, 1)
      await hex.wait()
      showToast(t('auditSuccessful'))
      value == 1 ? btnLoading1.value = false : btnLoading2.value = false
      onRefresh2()
    } catch (err) {
      value == 1 ? btnLoading1.value = false : btnLoading2.value = false
      showToast(t('auditFail'))
    }
  }
}
const onLoad = async () => {
  loading.value = false;
  finished.value = true;
  refreshing.value = false;
};
const onLoad2 = async () => {
  loading2.value = false;
  finished2.value = true;
  refreshing2.value = false;
};
const onRefresh = async () => {
  try {
    await userEth.getApprovedTraders(0)
    onAll(1)
    // 全选
    loading.value = false;
    finished.value = true;
    refreshing.value = false;
  } catch (error) {
    loading.value = false;
    finished.value = true;
    refreshing.value = false;
  }
};
const onRefresh2 = async () => {
  try {
    await userEth.getApprovedTraders(2)
    onAll(2)
    loading2.value = false;
    finished2.value = true;
    refreshing2.value = false;
  } catch (error) {
    loading2.value = false;
    finished2.value = true;
    refreshing2.value = false;
  }
};
const initData = async () => {
  await userEth.getApprovedTraders(0)
  onAll(1)
  loading.value = false;
  finished.value = true;
  refreshing.value = false;
  await userEth.getApprovedTraders(2)
  onAll(2)
  loading2.value = false;
  finished2.value = true;
  refreshing2.value = false;
}
// initData()
</script>

<style lang="scss" scoped>
.flex_center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;

}

.fixed_class {
  position: fixed;
  bottom: 44px;
  height: 30px;
  width: 10rem;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .fix_button {
    max-width: 90px;
    height: 28px;
    font-size: 11px;
  }
}

.shopItem_class {
  width: 100%;
  position: relative;

  .checked_class {
    position: absolute;
    left: 50%;
    top: -9px;
  }
}

.select_box {
  display: flex;
  padding: 15px 5px;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
  color: #fff;
}

.flex {
  display: flex;
}

.flexcol {
  display: flex;
  flex-direction: column;
  row-gap: 2px
}

.rotate-180 {
  transform: rotate(180deg)
}

.select_item {
  display: flex;
  gap: 5px;

  img {
    width: 9px;
  }
}

.content-wrapper {

  :deep .van-tabs__wrap {
    height: 34px;
  }

  :deep .van-tabs__nav {
    background: $primary-color;
    border-radius: 10px 10px 0 0;
    padding: 2px;
    height: 32px;
  }

  .lineheight {
    height: 6px;
  }

  .tab_warpper {
    padding: 0;
    margin-top: -1px;
  }

  .batch_button {
    height: 26px;
    width: 80px;
    font-size: 10px;
  }

  :deep .van-tabs__nav .van-tab--active {
    background-size: 100% 100%;
    font-weight: 700;
  }

  :deep .van-tabs__nav .van-tab--active:nth-child(2) {
    background-size: 100% 100%;
    font-weight: 700;
  }

  :deep .van-tabs__nav .van-tabs__line {
    border-radius: 5px;
    width: 0px;
    bottom: 20px;
  }

  :deep .van-grid-item__content {
    background: transparent;
  }
}

.btn-orange {
  background: linear-gradient(274.97deg, #fea021 4.2%, #ffc350 98.78%);
  box-shadow: inset 0 -7px 3px #ff9300ab;
  border-radius: 40px;
  order: 2;
}

.content-wrapper {
  position: relative;
  z-index: 1;
}

.seller-wrap {
  padding: 10px;

  .title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #0d1e43;

    img {
      display: block;
      margin-right: 10px;
      width: 14px;
    }
  }

  :deep .van-grid-item__content {
    padding-bottom: 0.13333rem;
  }


}

.content-wrap {
  padding: 0px 10px 8px 10px;
  border-radius: 14px;
}

.head-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4.26667rem;
  background: linear-gradient(180deg, #ffd001 1.6rem, rgba(255, 208, 1, 0));
}

.head-search-wrap {
  display: flex;
  align-items: center;
  padding: 0.4rem;
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  transition: 0.3s;
  z-index: 9;

  .location {
    font-size: 0.42667rem;
    font-weight: 500;
    font-weight: 700;

    .van-icon-location-o {
      font-size: 0.48rem;
      font-weight: 700;
    }

    span {
      margin: 0 0.08rem;
    }
  }

  .van-search {
    flex: 1;
    margin-left: 0.32rem;
    padding: 0;
    height: 0.93333rem;
    font-size: 0.37333rem;
    background: #fff;
    border-radius: 0.48rem;
    overflow: hidden;

    :deep .van-search__content {
      background: transparent;
    }

    :deep .van-search__action {
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0;
      box-sizing: border-box;

      .van-button--primary {
        margin-right: 0.08rem;
        height: 0.77333rem;
        font-size: 0.37333rem;
        background: #ffd001;
        border-radius: 0.48rem;
        border: none;
      }
    }
  }
}
</style>
